<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>挂号界面</title>
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../css/head.css">
    <style>
        #bgs {
            padding: 25px;

            background-color: rgba(226, 196, 196, 0.2);
            margin-top: 30px;

            box-shadow: -5px -5px 10px rgb(246, 246, 246);
        }

        h3 {
            color: rgb(46, 85, 2);

            font-weight: bold;
        }

        label {
            color: rgb(46, 85, 2);
            font-size: 15px;
        }

        #liucheng div p {
            font-size: 10px;
            text-align: center;
            margin-top: 30%;
            color: rgb(80, 180, 0);
            font-weight: bold;

        }

        #liucheng {
            background-color: rgb(245, 245, 245, 0.5);
        }

        #liucheng div {
            padding-top: 20px;
        }
    </style>
</head>

<body>


    <!-- 导航开始 -->
    <div>
            <div class="container-fluid">
                <div class="row" style="background-color:rgb(1,81,40)" >
                    <ul class="nav navbar-nav navbar-right" style="padding-right: 20px;font-size: 10px;" id="head">
                        <li><a href="#">欢迎&nbspxxx!</a></li>
                        <li><a href="login.html">安全退出</a></li>
                        <li><a href="personal/myinfo.html">个人中心</a></li>
                    </ul>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <ul class="nav navbar-nav" id="daohang"
                        style="width: 100%">
                        <li style="padding-top: 0px;">
                                <img src="../imgs/logo1 .png" alt="" style="width: 60px; height:60px;">
                            </li>
                            <li><a href="index/index.html">
                                首页
                            </a></li>
                        <li><a href="register.html">
                                预约挂号
                            </a></li>
                            <li><a href="department.html">
                                科室导航
                            </a></li>
                        
                        <li><a href="science/science.html">
                                健康科普
                            </a></li>
                        <li><a href="#">
                                留言咨询
                            </a></li>
                        <ul class="nav navbar-nav navbar-right">
                           <li style="padding-top: 10px;"><a href="map/MapShow.html">医院位置导航<img src="../imgs/地图.png"  style="width: 15px; margin-left:5px "></a></li>
                        </ul>
                    </ul>
                </div>
            </div>
            <!-- 导航结束 -->
        


        <div class="container">
            <div class="row">
                <div class="col-md-12" id="liucheng">
                    <div class="col-md-2"></div>
                    <div class="col-md-1"><img src="../imgs/填写信息小图标.png" alt=""><br>
                        <p>填写挂号信息</p>
                    </div>
                    <div class="col-md-1" style="margin-right: 2.5%; margin-top: 2%"><img src="../imgs/连接线.png" alt="">
                    </div>
                    <div class="col-md-1"><img src="../imgs/钱包小图标.png" alt=""><br>
                        <p>在线支付</p>
                    </div>
                    <div class="col-md-1" style="margin-right: 2.5%; margin-top: 2%"><img src="../imgs/连接线.png" alt="">
                    </div>
                    <div class="col-md-1"><img src="../imgs/日期小图标.png" alt=""><br>
                        <p>等待就医</p>
                    </div>
                    <div class="col-md-1" style="margin-right: 2.5%; margin-top: 2%"><img src="../imgs/连接线.png" alt="">
                    </div>
                    <div class="col-md-1"><img src="../imgs/医院小图标.png" style="height:80px; width: 70px;" alt="">
                        <br>
                        <p>医院快速就医</p>
                    </div>
                </div>
                <div class="col-md-4" id="bgs" style="background-color:rgb(245, 245, 245, 0.7) ">
                    <div class="caption" style="font-size: 20px;margin-bottom: 10px;margin-top: 5px;">患者实名制挂号与注册建档须知</div>
                    <div class="text">
                        <p>
                            为保护病人权益，维护医院正常医疗秩序，请各位患友及家属自觉遵守病人实名注册建档、挂号、就诊规定。
                        </p>
                        <p>
                            一、办理注册建档时，请选择以下方式之一提供病人基本信息：
                        </p>
                        <p>
                            1）出示病人本人的身份证原件（第2代身份证为佳）
                        </p>
                        <p>
                            2）有效身份证明原件（户口本/驾驶证/老年证等）
                        </p>
                        <p>
                            3）北京市医保卡
                        </p>
                        <p>
                            二、患者凭身份证或就医凭证挂号，必要时需同时出示病人有效身份证明。未经医师签名同意，不退号，不更名。
                        </p>
                        <p>
                            三、每次就医时请随身携带身份证或就医凭证，妥善保管。
                        </p>
                        <p>
                            四、严禁使用他人就医凭证挂号、就诊，一经发现就医凭证基本信息与患者真实身份不符，医院有权终止接诊，由此产生的一切不良后果由患者及家属自行承担。
                        </p>
                        <p>
                            五、谨防“号贩子”冒用他人身份证、就医凭证进行非法倒号。
                        </p>
                        <p>
                            <br />
                        </p>
                    </div>
                    <div class="col-md-10">
                            <div class="caption" style="font-size: 20px;margin-bottom: 10px">医疗服务费以及报销比例</div>
                        <img src="../imgs/报销比列图.png" style="width: 130%;padding-left: 0px;">
                    </div>
                </div>
                <div class="col-md-8" id="bgs"">
                <div class=" nav navbar-nav navbar-right">
                    <h4><a href="man/man.html">不了解挂哪个科室?点这里</a></h4>
                </div>
                <div style="margin-top: 70px;margin-bottom: 50px;">
                    <h3>患者信息&nbsp&nbsp<img src="../imgs/下-箭头.png" style="height: 20px;"></h3>
                </div>
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="firstname" placeholder="请输入姓名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="lastname" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="lastname" placeholder="性别">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">年龄</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="firstname" placeholder="请输入年龄">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">手机号</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="firstname" placeholder="请输入手机号">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">就医卡</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" id="firstname" placeholder="请输入就医卡号(可空)">
                        </div>
                    </div>
                    <div style="margin-bottom: 50px;margin-top: 70px;">
                        <h3>医生信息&nbsp&nbsp<img src="../imgs/下-箭头.png" style="height: 20px;"></h3>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">科室</label>
                        <div class="col-sm-7">
                            <select class="form-control">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">医生</label>
                        <div class="col-sm-7">
                            <select class="form-control">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">就医时间段</label>
                        <div class="col-sm-7">
                            <select class="form-control">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-7">
                            <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="time()">
                                <span class="glyphicon glyphicon-user"></span> 预约挂号!
                            </button>
                            
                            <!-- 弹出支付框 -->
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                        </div>
                                        <div class="modal-body">
                                            <div>
                                                <label id="show" style="font-size: 30px"></label>
                                            </div>
                                            <div>请用手机扫描二维码完成支付↓</div>
                                            <div style="text-align: center"><img src="../imgs/二维码.png" style="height: 200px;"></div>
                                        
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-primary" onclick="finReg()">支付成功!</button>
                                            <button type="button" class="btn btn-default"  onclick="forgive()">放弃支付!</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <script>

        var t = null;
        var ss=0;
        var mm=15;
        function time(){
        clearTimeout(t);//清除定时器
            if(ss==0){
                ss=59;
                mm=mm-1;
            }else{
                if(ss<=10){
                    ss=ss-1;
                    document.getElementById("show").innerHTML =  "请在15分钟之前完成支付："+mm+":0"+ss+"";
                }else{
                    ss=ss-1;
                    document.getElementById("show").innerHTML =  "请在15分钟之前完成支付："+mm+":"+ss+"";
                }              
            }
            if(ss==0&&mm==0){
                window.location.href='register.html';
            }
            t = setTimeout(time,1000); //设定定时器，循环执行
       }

       function forgive(){
           window.location.href='register.html';
       }
       function finReg(){
           window.location.href='personal/order.html';
       }

    




    </script>

    <script src="../plugins/jquery/jquery.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.js"></script>
</body>

</html>